<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Protected</title>
  </head>
  <body>
    <div>Protected Site</div>
    <div id="actionbar"></div>

    <script type="module">
      function init() {
        const actionbarEl = document.getElementById('actionbar');
        actionbarEl.innerHTML = '';

        const logined = localStorage.getItem('login');
        if (!logined) {
          const btn = document.createElement('button');
          btn.innerText = 'Login';
          function login() {
            window.open('login.html?redirect=done.html');
          }
          btn.onclick = login;
          actionbarEl.appendChild(btn);
        } else {
          const btn = document.createElement('button');
          btn.innerHTML = 'Logout';
          btn.onclick = () => {
            sessionStorage.clear();
            init();
          };
          actionbarEl.appendChild(btn);
        }
      }

      window.addEventListener('storage', () => {
        init();
      })
      init();
    </script>
  </body>
</html>
